<style scoped>
  .layout{
    border: 1px solid #d7dde4;
    background: #f5f7f9;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    height: 100%;
  }
  .layout-logo{
    width: 200px;
    line-height: 40px;
    height: 40px;
    border-radius: 3px;
    float: left;
    position: relative;
    top: 15px;
    left: 20px;
    font-weight: bold;
    text-align: center;
    color: beige;
    font-size: 20px;
    align-content: center;
  }
  .layout-nav{
    width: 590px;
    margin: 0 auto;
    margin-right: 20px; 
   
  }
    .layout-nav a{
        color: antiquewhite;
    }
  .content-center{
        width: 100%;
        height: 40px;
        line-height: 40px;
        margin: 0 auto;
        margin-top: 10px;
        background: #f5f7f9;
        text-align: center; 
        font-size: 15px;
  }
    .row-a a{
        color: rgb(0, 20, 100);
    }

    .content-nav{
        width: 1000px;
        margin: 0 auto;
        margin-top: 20px;
    }
    .icon_right{
        margin-right: 2px;
        color:yellowgreen;
        
    }
    .content-nav-top{
        width: 100%;
        height: 350px;
    }
    .content-nav-top img{
        width: 100%;
        height: 350px;
    }
    .carousel-title{
        width: 100%;
        height: 50px;
        line-height: 50px;
        border-bottom: 0.5px lightsteelblue solid;
    }
    .carousel-nav{
        width: 100%;
        height: 150px;
        margin-top: 10px;
        border-bottom: 1px solid lightsteelblue;
    }
    .cn-row{
        margin-top: 20px;
    }
  .layout-footer-center{
      border: 1px solid #d7dde4;
      background-color: #d7dde4;
    text-align: center;
    margin-top: 20px;
    
  }
  
    .demo-drawer-profile{
        font-size: 14px;
    }
    .demo-drawer-profile .ivu-col{
        margin-bottom: 12px;
    }


</style>

<template>
    <div class="layout">
        <Layout>
            <Header>
                <Menu mode="horizontal" theme="dark" active-name="1">
                    <div class="layout-logo">游戏资讯分享平台</div>
                    <div class="layout-nav">
                         <MenuItem name="1">
                            <a @click="Home('Home')">首页</a>
                        </MenuItem>
                        <MenuItem name="2">
                            <a @click="SportsCircle('sportsClick')" >资讯社区</a>
                        </MenuItem>
                        <MenuItem name="3">
                            <a @click="Team('Team')">游戏库</a>
                        </MenuItem>
                        <MenuItem name="4">
                            <a  @click="MyTieZi('MyTieZi')" >我的资讯</a>
                        </MenuItem>
                        <MenuItem name="5">
                            <a @click="TableMain('TableMain')">关于我</a>
                        </MenuItem>
                         <MenuItem name="6">
                            <a @click="adminOut('adminOut')" style="color:red">退出登录</a>
                        </MenuItem>
                    </div>
                </Menu>
            </Header>

            <content :style="{padding:'0 50px'}">
                
               <div class="content-nav">
                   <Button @click="PersonsTeams()" type="primary">喜欢的游戏厂商</Button>
                   <Button @click="personsPlayers()" type="primary">喜欢的游戏</Button>
                  <row>
                      <i-col span="12" v-for="(item,index) in TeamList" :key="index" style="margin-top: 10px;">
                            <Card style="width:100%;" >
                                <p slot="title"><a>{{item.tname}}</a></p>
                                <row>
                                    <i-col span="" style="margin-top: 10px;">成立时间: {{item.tshuju}}</i-col>
                                    <i-col span="" style="margin-top: 10px;">总部位置: {{item.tzhanji}}</i-col>
                                    <i-col span="" style="margin-top: 10px;">代表作: {{item.tjiaolian}}</i-col>
                                    <i-col span="" style="margin-top: 10px;">简介：{{item.tshuoming}}</i-col>
                                    <i-col span="" style="margin-top: 10px;">
                                    <Button @click="TeamClick(item.tid)" type="primary">查看旗下游戏</Button>
                                        <a @click="TeamLikeClick(item.tid)" style="float:right;"><Icon type="ios-heart" />喜欢</a>
                                    </i-col>
                                </row>
                            </Card>
                             <div>
                            <!-- //右侧游戏信息 -->
                            <Drawer :closable="false" width="640" v-model="value4">
                                <div v-for="(play,index) in playerList" :key="index">
                                    <p :style="pStyle"><a>{{play.pname}}</a></p>
                                    <div class="demo-drawer-profile">
                                        <Row>
                                            <Col span="12">价格: {{play.pweizhi}}</Col>
                                            <Col span="12">类型: {{play.pjingyan}} </Col>
                                        </Row>
                                        <Row>
                                            <Col span="12">史低价格: {{play.pshengao}} </Col>
                                            <Col span="12">发行时间: {{play.ptizhong}}</Col>
                                        </Row>
                                        <Row>
                                            <Col span="12">硬件配置: {{play.pguoji}}</Col>
                                            <Col span="12"><a @click="PlayerLikeClick(play.pid)"><Icon type="ios-heart" />喜欢</a></Col>
                                        </Row>
                                        <Row>
                                            <Col span="">游戏简介: {{play.pshuoming}}</Col>
                                        </Row>
                                    </div>
                                    <Divider />
                                </div>
                            </Drawer>
                            <!-- 左侧喜欢的公司 -->
                            <Drawer title="" width="300" placement="left" :closable="false" v-model="value2" >
                                <p :style="pStyle"><h1>我喜欢的厂商</h1></p>
                                    <Divider />
                                <div  v-for="pt in personsTeams">
                                    <Row>
                                        <Col span=""><h2>{{pt.team.tname}}</h2></Col>
                                        <Col span="12">代表作:{{pt.team.tjiaolian}}</Col>
                                    </Row>
                                    <Row>
                                        <Col span="12">总部地址:{{pt.team.tzhanji}}</Col>
                                        <Col span="12"><a @click="PersonsTeamsDel(pt.ptId)" style="color:red;"><Icon type="ios-heart" />解除喜欢</a></Col>
                                    </Row>
                                    <Divider />
                                </div>
                            </Drawer>

                             <!-- 左侧喜欢的游戏 -->
                            <Drawer title="" width="300" placement="left" :closable="false" v-model="value3" >
                                <p :style="pStyle"><h1>我喜欢的游戏</h1></p>
                                    <Divider />
                                <div  v-for="pp in personsPlayersList">
                                    <Row>
                                        <Col span=""><h2>{{pp.player.pname}}</h2></Col>
                                        <Col span="12">价格:{{pp.player.pweizhi}}</Col>
                                    </Row>
                                     <Row>
                                        <Col span="12">历史最低{{pp.player.pshengao}}</Col>
                                        <Col span="12">发布日期:{{pp.player.ptizhong}}</Col>
                                    </Row>
                                    <Row>
                                        <Col span="12">硬件配置:{{pp.player.pguoji}}</Col>
                                        <Col span="12"><a @click="PersonsplayersDel(pp.ppId)" style="color:red;"><Icon type="ios-heart" />解除喜欢</a></Col>
                                    </Row>
                                    <Divider />
                                </div>
                                
                            </Drawer>
                        </div>
                      </i-col>
                  </row>
               </div>
            </content>
            <Footer class="layout-footer-center">2019-2020 &copy; TalkingData</Footer>
        </Layout>
    </div>
</template>

<script>
import axios from 'axios'
//右侧商品
    export default {
        inject:["reload"],
        data () {
            return {
                limitNum: 5,
                limitFrom: 0,
                TeamList:[],
                value3: false,
                value2: false,
                value4: false,
                pStyle: {
                    fontSize: '16px',
                    color: 'rgba(0,0,0,0.85)',
                    lineHeight: '24px',
                    display: 'block',
                    marginBottom: '16px'
                },
                playerList:[],
                PTnum:0,
                personsTeams:[],
                personsPlayersList:[],
                userId:0
            }
           
        },
        methods: {
            changeLimit () {
                this.limitFrom = this.limitFrom === 0 ? 5 : 0;
            },
            SportsCircle(){
                this.$router.push({
                path: `/SportsCircle/` })
            },
            MyTieZi(){
                this.$router.push({
                path: `/MyTieZi/` })
            },
            Team(){
                this.$router.push({
                path: `/Team/` })
            },
            TableMain(){
                this.$router.push({
                path: `/TableMain/` })
            },
            adminOut(){
                sessionStorage.clear();
                this.$router.push({
                path: `/` })
            },
            Home(){
                this.$router.push({
                path: `/Home/` })
            },
            //根据公司编号查看游戏信息
            TeamClick(tid){
                console.log("tid:"+tid);
                axios('http://localhost:8081/playerFidFindAll?ptname='+tid).then((res) =>{
                    this.playerList = res.data;
                    console.log(this.playerList);
                    // this.showPrise = !this.showPrise;
                })
                this.value4 = true;
            },
            //添加喜欢的公司
            TeamLikeClick(tid){
                console.log(tid);
                this.userId = sessionStorage.getItem('userId');
                axios('http://localhost:8081/personsTeamsAdd?pTtId='+tid+"&pTpId="+this.userId).then((res) =>{
                    this.PTnum = res.data;
                    if(this.PTnum==1){
                        this.reload();
                        this.$Modal.confirm({
                            title: '已加入我喜欢！',
                            loading: false
                        });
                    }else if(this.PTnum==3){
                        this.$Modal.confirm({
                            title: '此公司您已加入我喜欢，无需重复添加！',
                            loading: false
                        });
                    }else{
                        this.$Modal.confirm({
                            title: '加入失败！',
                            loading: false
                        });
                    }
                })
            },
            //展示喜欢的游戏
            PersonsTeams(){
                this.userId = sessionStorage.getItem('userId');
                console.log(this.userId)
                 axios('http://localhost:8081/personsTeamsFindAll?pTpId='+this.userId).then((res) =>{
                    this.personsTeams = res.data;
                    console.log(this.personsTeams);
                    // this.showPrise = !this.showPrise;
                })
                this.value2 = true;
            },
            //公司解除喜欢
            PersonsTeamsDel(ptId){
                 axios('http://localhost:8081/personsTeamsDel?ptId='+ptId).then((res) =>{
                    this.PTnum = res.data;
                    if(this.PTnum==1){
                        this.reload();
                        this.$Modal.confirm({
                            title: '解除成功！',
                            loading: false
                        });
                    }else{
                        this.$Modal.confirm({
                            title: '解除失败！',
                            loading: false
                        });
                    }
                })
            },
            //添加喜欢的游戏
            PlayerLikeClick(pid){
                console.log(pid);
                this.userId = sessionStorage.getItem('userId');
                axios('http://localhost:8081/personsPlayersAdd?ppTId='+pid+'&ppPid='+this.userId).then((res) =>{
                    this.PTnum = res.data;
                    if(this.PTnum==1){
                        this.reload();
                        this.$Modal.confirm({
                            title: '已加入我喜欢！',
                            loading: false
                        });
                    }else if(this.PTnum==3){
                        this.$Modal.confirm({
                            title: '此游戏您已加入我喜欢，无需重复添加！',
                            loading: false
                        });
                    }else{
                        this.$Modal.confirm({
                            title: '加入失败！',
                            loading: false
                        });
                    }
                })
            },
            //喜欢的游戏
            personsPlayers(){
                this.userId = sessionStorage.getItem('userId');
                 axios('http://localhost:8081/personsPlayersFindAll?ppPid='+this.userId).then((res) =>{
                    this.personsPlayersList = res.data;
                    console.log(this.personsPlayersList);
                    // this.showPrise = !this.showPrise;
                })
                this.value3 = true;
            },
            //游戏解除喜欢
            PersonsplayersDel(ppId){
                axios('http://localhost:8081/personsPlayersDel?ppId='+ppId).then((res) =>{
                    this.PTnum = res.data;
                    if(this.PTnum==1){
                        this.reload();
                        this.$Modal.confirm({
                            title: '解除成功！',
                            loading: false
                        });
                    }else{
                        this.$Modal.confirm({
                            title: '解除失败！',
                            loading: false
                        });
                    }
                })
            }
        },
        //在created函数中使用axios的get请求向后台获取信息数据
        created(){  
            this.$ajax('http://localhost:8081/TeamFindAll').then(res=>{
                this.TeamList = res.data
                console.log(this.TeamList);
            }).catch(function (error){
                console.log(error);
            });
        }
    }
</script>